import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      reducer(val) {
        return {
          list: val.list,
        };
      },
    }),
  ],
  state: {
    list: JSON.parse(localStorage.getItem("vuex.list")) || [],
    // list: [
    //   { id: 100, name: "吃饭", isDone: true },
    //   { id: 101, name: "睡觉", isDone: false },
    //   { id: 102, name: "打豆豆", isDone: true },
    // ],
    getSel: "all",
  },
  mutations: {
    add(state, payload) {
      state.list.push({
        id: state.list.length ? state.list.at(-1).id + 1 : 100,
        name: payload,
        isDone: false,
      });
    },
    del(state, payload) {
      state.list = state.list.filter((item) => item.id !== payload);
    },
    clickFn(state, payload) {
      state.getSel = payload;
    },
    clear(state) {
      state.list = state.list.filter((item) => !item.isDone);
    },
  },
  getters: {
    showArr(state) {
      if (state.getSel === "yes") {
        return state.list.filter((item) => item.isDone);
      } else if (state.getSel === "no") {
        return state.list.filter((item) => !item.isDone);
      } else {
        return state.list;
      }
    },
  },
});
Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");
